<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>主页</title>
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
      min-height: 100vh;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .container {
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
      padding: 2.5rem 2rem 2rem 2rem;
      max-width: 420px;
      width: 100%;
      margin: 2rem 0;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    h1 {
      color: #2c3e50;
      text-align: center;
      margin-bottom: 1.5rem;
      font-size: 2.1rem;
      letter-spacing: 1px;
      font-weight: 700;
    }

    .form-group {
      margin-bottom: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    label {
      font-weight: 600;
      color: #3a3a3a;
      margin-bottom: 0.2rem;
      font-size: 1.05rem;
    }

    input[type="date"],
    select {
      width: 100%;
      padding: 0.7rem 1rem;
      border: 1.5px solid #e0e0e0;
      border-radius: 6px;
      font-size: 1rem;
      background: #f8fafc;
      transition: border-color 0.2s, box-shadow 0.2s;
      box-sizing: border-box;
    }

    input[type="date"]:focus,
    select:focus {
      outline: none;
      border-color: #6bb4ff;
      box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.13);
      background: #fff;
    }

    .button-group {
      margin-top: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
    }

    a {
      display: block;
      padding: 0.85rem 0;
      background: linear-gradient(90deg, #6bb4ff 0%, #4e8cff 100%);
      color: white;
      text-decoration: none;
      border-radius: 6px;
      font-size: 1.08rem;
      font-weight: 600;
      text-align: center;
      box-shadow: 0 2px 8px rgba(52, 152, 219, 0.08);
      transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
      letter-spacing: 0.5px;
    }

    a:hover {
      background: linear-gradient(90deg, #4e8cff 0%, #6bb4ff 100%);
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 4px 16px rgba(52, 152, 219, 0.13);
    }

    @media (max-width: 600px) {
      .container {
        padding: 1.2rem 0.5rem 1.5rem 0.5rem;
        max-width: 98vw;
      }
      h1 {
        font-size: 1.3rem;
      }
      a {
        font-size: 0.98rem;
        padding: 0.7rem 0;
      }
    }
  </style>
  <script type="text/javascript" src="../static/js/test.js"></script>
  <script>
    // 提取公共函数，减少代码重复
    function getCommonParams() {
      const dateInput = document.getElementById('dateInput');
      const selectedDate = dateInput.value;
      const nameSelect = document.getElementById('nameSelect');
      const selectedName = nameSelect.value;
      const encodedName = encodeURIComponent(selectedName);
      return { selectedDate, encodedName };
    }

    function navigateWithDate() {
      const { selectedDate, encodedName } = getCommonParams();
      const lowerCaseName = decodeURIComponent(encodedName).toLowerCase();
      const target = "商品鸡".toLowerCase();

      if (!selectedDate) {
        alert("请选择日期。");
        return;
      }

      const url = lowerCaseName.includes(target) 
        ? `/getInventoryNumb?date=${selectedDate}&name=${encodedName}` 
        : `/getInventoryNumb1?date=${selectedDate}&name=${encodedName}`;
      window.location.href = url;
    }

    function togetInventoryDieNum() {
      const { selectedDate, encodedName } = getCommonParams();
      const isAudit = document.getElementById('isAudit').value;
      const isSend = document.getElementById('isSend').value;

      if (!selectedDate) {
        alert("请选择日期。");
        return;
      }

      const url = `/getInventoryDieNum?date=${selectedDate}&name=${encodedName}&isAudit=${isAudit}&isSend=${isSend}`;
      window.location.href = url;
    }

    function insertData() {
      const { selectedDate, encodedName } = getCommonParams();
      const isAudit = document.getElementById('isAudit').value;
      const isSend = document.getElementById('isSend').value;

      if (!selectedDate) {
        alert("请选择日期。");
        return;
      }

      const url = `/dieChicken?date=${selectedDate}&name=${encodedName}&isAudit=${isAudit}&isSend=${isSend}`;
      window.location.href = url;
    }


    //**=======================================

    function createPagination(options) {
      console.log("被调用了")
      // 默认配置
      const defaults = {
        total: 0, // 总数据量
        pageSize: 10, // 每页条数
        currentPage: 1, // 当前页码
        maxButtons: 5, // 显示的最大页码按钮数
        showPrevNext: true, // 显示上一页/下一页
        showFirstLast: true, // 显示首页/末页
      };

      // 合并配置
      var config = Object.assign({}, defaults, options);

      // 计算总页数
      config.totalPage = Math.ceil(config.total / config.pageSize);

      /**
       * 跳转到指定页码
       * @param {number} page 目标页码
       * @returns {boolean} 是否成功跳转
       */
      function goToPage(page) {
        page = parseInt(page);
        if (isNaN(page)) return false;

        var newPage = Math.max(1, Math.min(page, config.totalPage));
        if (newPage !== config.currentPage) {
          config.currentPage = newPage;
          return true;
        }
        return false;
      }

      /**
       * 获取分页状态
       * @returns {Object} 分页状态
       */
      function getState() {
        return {
          currentPage: config.currentPage,
          pageSize: config.pageSize,
          total: config.total,
          totalPage: config.totalPage,
        };
      }

      /**
       * 获取分页UI数据
       * @returns {Object} 分页UI配置
       */
      function getPages() {
        var pages = [];
        var start = Math.max(
                1,
                config.currentPage - Math.floor(config.maxButtons / 2),
        );
        var end = Math.min(config.totalPage, start + config.maxButtons - 1);

        // 调整起始页码
        if (end - start + 1 < config.maxButtons) {
          start = Math.max(1, end - config.maxButtons + 1);
        }

        // 生成页码按钮
        for (var i = start; i <= end; i++) {
          pages.push({
            page: i,
            text: i.toString(),
            active: i === config.currentPage,
          });
        }


        return {
          pages: pages,
          showPrev: config.showPrevNext && config.currentPage > 1,
          showNext: config.showPrevNext && config.currentPage < config.totalPage,
          showFirst: config.showFirstLast && config.currentPage > 1,
          showLast: config.showFirstLast && config.currentPage < config.totalPage,
          prevText: '‹',
          nextText: '›',
          firstText: '«',
          lastText: '»',
        };
      }
    }
  </script>
</head>
<body>
  <div class="container">
    <h1>鸡智宝数据查询主页</h1>
    <div class="form-group">
      <label for="dateInput">选择日期:</label>
      <input type="date" id="dateInput">
    </div>
    <div class="form-group">
      <label for="nameSelect">选择名称:</label>
      <select id="nameSelect">
        <option value="漯河禽业商品鸡">漯河禽业商品鸡</option>
        <option value="漯河禽业种鸡">漯河禽业种鸡</option>
        <option value="西华商品鸡">西华商品鸡</option>
        <option value="西华种鸡">西华种鸡</option>
        <option value="阜新商品鸡">阜新商品鸡</option>
        <option value="阜新种鸡">阜新种鸡</option>
        <option value="漯河禽业商品鸡01场">漯河禽业商品鸡01场</option>
      </select>
    </div>
    <div class="form-group">
      <label for="isAudit">是否审核:</label>
      <select id="isAudit">
        <option value="Y">是</option>
        <option value="N">否</option>
      </select>
    </div>
    <div class="form-group">
      <label for="isSend">是否上传:</label>
      <select id="isSend">
        <option value="Y">是</option>
        <option value="N">否</option>
      </select>
    </div>
    <div class="button-group">
      <a href="#" onclick="navigateWithDate()">获取存栏信息</a>
      <a href="#" onclick="togetInventoryDieNum()">获取死淘（目前只能获取到商品鸡死淘信息）</a>
      <a href="#" onclick="insertData()">插入数据库里面（死淘数）</a>
      <a href="/data">页面跳转（操作数据库）</a>
      <a href="/chickenSell">商品鸡销售功能</a>
    </div>
  </div>
<button onclick="createPagination(this)">点击测试</button>
</body>
</html>
